<template>
  <view>
    <u-cell-group>
      <u-cell-item title="品牌" :arrow="false" class="u-p-t-10 u-p-b-10">
        <u-input
          v-if="applyType == 1"
          :value="brand && brand.label"
          @tap="showBrandPicker = true"
          type="select"
          placeholder="请选择品牌"
          inputAlign="right"
        ></u-input>
        <view class="" v-if="applyType == 2">
          <text>{{ brand && brand.label }}</text>
        </view>
      </u-cell-item>
      <view>
        <u-cell-item title="代码及描述" :arrow="false" class="u-p-t-10 u-p-b-10">
          <u-input
            v-if="applyType == 1"
            :value="product && product.label"
            @tap="showProductPicker = true"
            type="select"
            placeholder="请选择代码及描述"
            inputAlign="right"
          ></u-input>
          <text v-if="applyType == 2">{{ product && product.label }}</text>
        </u-cell-item>
        <u-cell-item
          title="库存"
          :arrow="false"
          :value="productList[productPickerIndex] && productList[productPickerIndex].StockNumber"
          class="u-p-t-10 u-p-b-10"
        ></u-cell-item>
        <u-cell-item title="申请数量" :arrow="false" class="u-p-t-10 u-p-b-10">
          <view class="u-flex-col u-col-bottom">
            <u-input
              v-if="applyType == 1"
              style="width: 50%;"
              type="number"
              :border="true"
              inputAlign="right"
              v-model="form.Product.Number"
            ></u-input>
            <text v-if="applyType == 2">{{ form.Product.Number }}</text>
          </view>
        </u-cell-item>

        <block v-if="applyType == 2">
          <u-cell-item title="验收数量" :arrow="false" class="u-p-t-10 u-p-b-10">
            <view class="u-flex-col u-col-bottom">
              <u-input
                style="width: 50%;"
                type="number"
                :border="true"
                inputAlign="right"
                v-model="form.Product.CheckNumber"
              ></u-input>
            </view>
          </u-cell-item>
          <u-cell-item title="差异数量" :arrow="false" class="u-p-t-10 u-p-b-10">
            <view class="u-flex-col u-col-bottom">
              <text>{{ differencesNum(form.Product.Number, form.Product.CheckNumber) }}</text>
            </view>
          </u-cell-item>
        </block>
      </view>
      <u-gap bg-color="#f5f5f5" :height="10"></u-gap>
      <view>
        <u-cell-item title="代码及描述" :arrow="false" class="u-p-t-10 u-p-b-10">
          <u-input
            v-if="applyType == 1"
            :value="t_product && t_product.label"
            @tap="showTProductPicker = true"
            type="select"
            placeholder="请选择代码及描述"
            inputAlign="right"
          ></u-input>
          <text v-if="applyType == 2">{{ t_product && t_product.label }}</text>
        </u-cell-item>
        <u-cell-item
          title="库存"
          class="u-p-t-10 u-p-b-10"
          :arrow="false"
          :value="t_productList[t_productPickerIndex] && t_productList[t_productPickerIndex].StockNumber"
        ></u-cell-item>
        <u-cell-item title="申请数量" class="u-p-t-10 u-p-b-10" :arrow="false">
          <view class="u-flex-col u-col-bottom">
            <u-input
              v-if="applyType == 1"
              :height="60"
              style="width: 50%;"
              type="number"
              inputAlign="right"
              :border="true"
              v-model="form.T_Product.Number"
            ></u-input>
            <text v-if="applyType == 2">{{ form.T_Product.Number }}</text>
          </view>
        </u-cell-item>
        <block v-if="applyType == 2">
          <u-cell-item title="验收数量" :arrow="false" class="u-p-t-10 u-p-b-10">
            <view class="u-flex-col u-col-bottom">
              <u-input
                style="width: 50%;"
                type="number"
                :border="true"
                inputAlign="right"
                v-model="form.T_Product.CheckNumber"
              ></u-input>
            </view>
          </u-cell-item>
          <u-cell-item title="差异数量" :arrow="false" class="u-p-t-10 u-p-b-10">
            <view class="u-flex-col u-col-bottom">
              <text>{{ differencesNum(form.T_Product.Number, form.T_Product.CheckNumber) }}</text>
            </view>
          </u-cell-item>
        </block>
      </view>

      <u-cell-item
        :title="applyType == 1 ? '申请时间' : '验收时间'"
        class="u-p-t-10 u-p-b-10"
        :arrow="false"
        :value="form.ApplyTime | date('yyyy-mm-dd hh:MM')"
      ></u-cell-item>
      <u-cell-item title="备注" class="u-p-t-10 u-p-b-10" :arrow="false">
        <view class="u-flex-col u-col-bottom">
          <u-input
            style="width: 80%;"
            :border="true"
            type="textarea"
            inputAlign="right"
            v-model="form.Remark"
          ></u-input>
        </view>
      </u-cell-item>
    </u-cell-group>

    <u-select
      :default-value="[brandPickerIndex]"
      @confirm="onBrandChange"
      v-model="showBrandPicker"
      :list="brandList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      :default-value="[productPickerIndex]"
      @confirm="onProductChange"
      v-model="showProductPicker"
      :list="productList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      :default-value="[t_productPickerIndex]"
      @confirm="onTProductChange"
      v-model="showTProductPicker"
      :list="t_productList"
      label-name="Value"
      value-name="Key"
    ></u-select>

    <u-select
      :default-value="[discountPickerIndex]"
      @confirm="onDiscountChange"
      v-model="showDiscountPicker"
      :list="discountList"
    ></u-select>
  </view>
</template>

<script>
export default {
  name: 'outdoor-apply-form',
  props: {
    applyType: {
      type: Number,
      default: 1
    },
    loadForm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectType: 4,
      brandList: [],
      brandPickerIndex: -1,
      brand: null,

      productList: [],
      productPickerIndex: -1,
      product: null,

      t_productList: [],
      t_productPickerIndex: -1,
      t_product: null,

      showBrandPicker: false,
      showProductPicker: false,
      showTProductPicker: false,

      discountList: [{ label: '100%', value: 100 }, { label: '50%', value: 50 }, { label: '0%', value: 0 }],
      discount: {
        label: '100%',
        value: 100
      },
      discountPickerIndex: 0,
      showDiscountPicker: false,

      GroupId: '',
      uuid: '',

      form: {
        BrandId: null,
        ApplyTime: parseInt(new Date().getTime() / 1000),
        Remark: '',
        ProductBaseList: [],
        ProductList: [],
        Product: {
          ModuleInfoId: 0,
          ProductId: null,
          Number: 1,
          Discount: 100,
          // 单价
          StandardAmount: 0,
          // 金额小计
          AmountSubtotal: 0
        },
        T_Product: {
          ModuleInfoId: 0,
          ProductId: null,
          Number: 0,
          Discount: 100,
          // 单价
          StandardAmount: 0,
          // 金额小计
          AmountSubtotal: 0
        }
      }
    };
  },

  created() {
    this.getBrandList();
  },

  methods: {
    differencesNum(number, checkNumber) {
      let result = 0;

      if (!number) {
        number = 0;
      }
      if (!checkNumber) {
        checkNumber = 0;
      }
      return parseInt(number) - parseInt(checkNumber);
    },

    initForm(data) {
      if (data) {
        this.GroupId = data.GroupId;
        this.uuid = data.uuid;
        if (data.ApplyList && data.ApplyList.length > 0) {
          this.form = Object.assign(this.form, this.$u.deepClone(data.ApplyList[0]));

          if (this.loadForm) {
            if (this.form.ProductList && this.form.ProductList.length > 1) {
              this.form.Product = this.form.ProductList[0];
              this.form.T_Product = this.form.ProductList[1];

              if (this.applyType == 2) {
                if (data.ApplyList[0].CheckTime) {
                  this.form.ApplyTime = this.form.ProductList[0].CheckTime;
                } else {
                  this.form.ApplyTime = parseInt(new Date().getTime() / 1000);
                }
                this.form.Remark = this.form.Product.CheckRemark;
              }
            }
            this.getBrandList();
          }
        }
      }
    },

    onBrandChange(e) {
      if (!e[0].value || !e[0].label) {
        if (this.brandList.length > 0) {
          this.brand = {
            label: this.brandList[0].Value,
            value: this.brandList[0].Key
          };
        } else {
          return false;
        }
      } else {
        this.brand = e[0];
      }
      this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.brand.value);

      this.form.BrandId = this.brand.value;

      this.productList = [];
      this.productPickerIndex = -1;
      this.product = null;

      this.t_productList = [];
      this.t_productPickerIndex = -1;
      this.t_product = null;

      this.getProductList(this.brand.value);
    },

    onProductChange(e) {
      if (!e[0].value || !e[0].label) {
        if (this.productList.length > 0) {
          this.product = {
            label: this.productList[0].Value,
            value: this.productList[0].Key
          };
        } else {
          return false;
        }
      } else {
        this.product = e[0];
      }
      this.productPickerIndex = this.productList.findIndex(item => item.Key == this.product.value);

      // this.form.Product.ModuleInfoId = this.productList[this.productPickerIndex].
      this.form.Product.ProductId = this.product.value;
    },

    onTProductChange(e) {
      if (!e[0].value || !e[0].label) {
        if (this.t_productList.length > 0) {
          this.t_product = {
            label: this.t_productList[0].Value,
            value: this.t_productList[0].Key
          };
        } else {
          return false;
        }
      } else {
        this.t_product = e[0];
      }
      this.t_productPickerIndex = this.t_productList.findIndex(item => item.Key == this.t_product.value);
      this.form.T_Product.ProductId = this.t_product.value;
    },

    onDiscountChange(e) {
      if (!e[0].label) {
        if (this.discountList.length > 0) {
          this.discount = {
            label: this.discountList[0].label,
            value: this.discountList[0].value
          };
        } else {
          return false;
        }
      } else {
        this.discount = e[0];
      }

      this.discountPickerIndex = this.discountList.findIndex(item => item.value == this.discount.value);
      this.form.Product.Discount = this.discount.value;
    },

    getBrandList() {
      this.$u.api
        .getBrandDic({
          SelectType: this.selectType
        })
        .then(res => {
          const { ResultCode, Module_BrandList, Shell_Pro_BrandList, Entity_Pro_BrandList, Outdoor_BrandList } = res;
          if (ResultCode === 1) {
            this.brandList = Outdoor_BrandList;

            if (this.loadForm) {
              this.$nextTick(() => {
                this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.form.BrandId);
                let currentBrand = this.brandList.find(item => item.Key == this.form.BrandId);
                this.brand = {
                  label: currentBrand.Value,
                  value: currentBrand.Key
                };
                this.getProductList(this.brand.value);
              });
            }
          }
        });
    },

    getProductList(brandId) {
      this.$u.api
        .getProductDic({
          SelectType: this.selectType,
          BrandId: brandId
        })
        .then(res => {
          const { ResultCode, ProductList, T_ProductList } = res;
          if (ResultCode === 1) {
            this.productList = ProductList;
            this.t_productList = T_ProductList;

            this.form.ProductBaseList = ProductList.concat(T_ProductList);

            if (this.loadForm) {
              this.productPickerIndex = this.productList.findIndex(item => item.Key == this.form.Product.ProductId);
              let currentProduct = this.productList.find(item => item.Key == this.form.Product.ProductId);
              this.product = {
                label: currentProduct.Value,
                value: currentProduct.Key
              };

              this.t_productPickerIndex = this.t_productList.findIndex(
                item => item.Key == this.form.T_Product.ProductId
              );
              let currentTProduct = this.t_productList.find(item => item.Key == this.form.T_Product.ProductId);
              this.t_product = {
                label: currentTProduct.Value,
                value: currentTProduct.Key
              };
            }
          }
        });
    }
  }
};
</script>

<style lang="scss"></style>
